
import React, { useEffect, useRef, useState } from 'react'; 
import './index.css'; 


const index: React.FC = () => {
    // 使用useState来管理消息列表，messages是一个包含文本和发送者信息的数组
    const [messages, setMessages] = useState<{
        avatar: string | undefined; text: string, fromUser: boolean 
}[]>([]);
    const wrap = useRef<HTMLInputElement>(null); // 创建ref用于访问输入框
    const ws = useRef<WebSocket | null>(null); // 创建ref用于存储WebSocket实例


    const heartBeatInterval=30000; //心跳间隔
    const heartBeatTimeout=useRef<NodeJS.Timeout | null>(null);//用于存储定时器



    useEffect(() => {
        // 创建WebSocket连接
        ws.current = new WebSocket("ws://localhost:8080");

        // 当接收到消息时的处理逻辑
        ws.current.onmessage = (e) => {
            // 使用setTimeout模拟延迟，2秒后将消息添加到状态中
            setTimeout(() => {
                setMessages((prevMessages) => [...prevMessages, { text: e.data, fromUser: false,avatar: 'https://n.sinaimg.cn/sinakd20108/450/w625h625/20221120/0326-47437c342790e62dc5139cc7eb638689.jpg' }]);
            }, 2000); 
        };

        // WebSocket连接成功时的回调
        ws.current.onopen = () => {
            console.log("连接成功");
            startHeartBeat() //连接成功后启动心跳检测
        };

            ws.current.onclose=()=>{
                clearTimeout(heartBeatTimeout.current!);
                console.log('连接关闭');
                
            }


        // 清理函数，在组件卸载时关闭WebSocket连接
        return () => {
            ws.current?.close();
            clearTimeout(heartBeatTimeout.current!) //清除心跳定时器
        };
    }, []); // 只在组件挂载时运行

    // 启动心跳检测
    const startHeartBeat=()=>{
        heartBeatTimeout.current=setInterval(()=>{
            if(ws.current && ws.current.readyState===WebSocket.OPEN){
                ws.current.send('ping') //发送心跳消息
                console.log('发送ping消息');
                
            }
        },heartBeatInterval)
    }



    // 发送消息的函数
    const send = () => {
        if (wrap.current && ws.current) { // 确保输入框和WebSocket实例存在
            const message = wrap.current.value; // 获取输入框的值
            ws.current.send(message); // 发送消息到WebSocket服务器
            // 更新消息列表，添加用户消息
            setMessages((prevMessages) => [...prevMessages, { text: message, fromUser: true,avatar: 'https://p7.itc.cn/q_70/images03/20210218/fc1e31b9beea492fba47b8e9204d6275.jpeg' }]);
            wrap.current.value = ''; // 清空输入框
        }
    };

    // 返回组件的JSX结构
    return (
      <div className='chat-container'>
            <h2>在线客服</h2>
            <div className='messages'>
                {messages.map((msg, index) => (
                    <div key={index} className={`message ${msg.fromUser ? 'user-message' : 'bot-message'}`}>
                        <img src={msg.avatar} alt="Avatar" className={`avatar ${msg.fromUser ? 'user-avatar' : 'bot-avatar'}`} />
                        <span>{msg.text}</span>
                    </div>
                ))}
            </div>
            <div className='input-container'>
                <input type="text" ref={wrap} className='chat-input' placeholder='输入消息...' />
                <button onClick={send} className='send-button'>发送</button>
            </div>
        </div>
    );
};

export default index; 
